<template>
	<view class="wrapper">
		<!--背景-->
		<view class="mine-bg main-flex">
			<view class="mine-bg-img">
				<view class="mine-bg-img-box">
					<image class="mine-bg-img-box-url" mode="aspectFill" src="/static/images/logo_bg.png"></image>
				</view>
			</view>
		</view>
		<!--头部-->
		<view class="mine-header" id="header" :class="isBgShow ? 'mine-header-bg' : ''">
			<menu-header>
				<view class="mine-menu1 main-flex">
					<view class="mine-menu1-item" @click="goSign">
						<uni-icons type="calendar" size="24" color="#e3230e"></uni-icons>
					</view>
					<view class="mine-menu1-item" @click="goUrl('/pages/mine/set')">
						<uni-icons type="gear" size="24" color="#e3230e"></uni-icons>
					</view>
					<view class="mine-menu1-item" @click="goService">
						<uni-icons type="headphones" size="24" color="#e3230e"></uni-icons>
					</view>
				</view>
			</menu-header>
		</view>
		<view class="mine-content" :style="{paddingTop: `${paddingTop}px`}">
			<view class="user main-flex">
				<view class="user-header">
					<u-avatar
						size="56"
						mode="aspectFill"
						bg-color="#f5f5f5"
						default-url="/static/images/icon/avatar.png"
						:src="imgUrl(userStore?.user?.heardImg)"></u-avatar>
				</view> 
				<view class="user-info main-flex-item" v-if="userStore?.user?.phone || userStore?.user?.heardImg">
					<view class="user-name">
					{{userStore?.user?.name || userStore?.user?.nickName}}
					<text v-if="setStore.baseUrl.indexOf('erp.zyzy') > -1" class="price" style="font-size: 28rpx;">(测试版)</text>
					</view>
					<view class="user-type" v-if="userStore?.user?.customerType === 1">{{userStore?.user?.company}}</view>
					<view class="user-type" v-else-if="userStore?.user?.customerType === 0">散客</view>
					<view class="user-tags main-flex" v-if="userStore?.user?.customerType === 1">
						<view class="user-tag">专享批发价</view>
					</view>
					
				</view>
				<view class="user-info main-flex-item" v-else>
					<view @click="goLogin">点击登录</view>
				</view>
				<view class="user-menu main-flex">
					<view class="user-menu-item" @click="goSign">
						<view class="user-menu-icon">
							<uni-icons type="calendar" size="28" color="#e3230e"></uni-icons>
						</view>
						<view class="user-menu-name">签到</view>
					</view>
					<view class="user-menu-item" @click="goUrl('/pages/mine/set')">
						<view class="user-menu-icon">
							<uni-icons type="gear" size="28" color="#e3230e"></uni-icons>
						</view>
						<view class="user-menu-name">设置</view>
					</view>
					<view class="user-menu-item" @click="goService">
						<view class="user-menu-icon">
							<uni-icons type="headphones" size="28" color="#e3230e"></uni-icons>
						</view>
						<view class="user-menu-name">客服</view>
					</view>
				</view>
			</view>
			<!--订单-->
			<view class="mine-content-box order">
				<view class="order-title">我的订单</view>
				<view class="order-list main-flex">
					<view class="order-item" @click="goUrl('/pages/order/list?status=0')">
						<uni-badge class="order-item-icon" :text="orderCount.order0" absolute="rightTop" :offset="[2, 2]" size="small">
							<image class="order-item-icon-url" src="/static/images/order/order0.png"></image>
						</uni-badge>
						<view class="order-item-name">待付款</view>
					</view>
					<view class="order-item" @click="goUrl('/pages/order/list?status=1')">
						<uni-badge class="order-item-icon" :text="orderCount.order1" absolute="rightTop" :offset="[2, 2]" size="small">
							<image class="order-item-icon-url" src="/static/images/order/order1.png"></image>
						</uni-badge>
						<view class="order-item-name">待发货</view>
					</view>
					<view class="order-item" @click="goUrl('/pages/order/list?status=2')">
						<uni-badge class="order-item-icon" :text="orderCount.order2" absolute="rightTop" :offset="[2, 2]" size="small">
							<image class="order-item-icon-url" src="/static/images/order/order2.png"></image>
						</uni-badge>
						<view class="order-item-name">已发货</view>
					</view>
					<view class="order-item" @click="goUrl('/pages/order/list?status=6')">
						<uni-badge class="order-item-icon" :text="orderCount.order6" absolute="rightTop" :offset="[2, 2]" size="small">
							<image class="order-item-icon-url" src="/static/images/order/order6.png"></image>
						</uni-badge>
						<view class="order-item-name">已完成</view>
					</view>
					<view class="order-item" @click="goUrl('/pages/order/list')">
						<uni-badge class="order-item-icon" :text="0" absolute="rightTop" :offset="[2, 2]" size="small">
							<image class="order-item-icon-url" src="/static/images/order/order.png"></image>
						</uni-badge>
						<view class="order-item-name">全部订单</view>
					</view>
				</view>
			</view>
			<!--钱包-->
			<view class="mine-content-box wallet main-flex">
				<view class="wallet-l main-flex-item main-flex">
					<view class="wallet-item main-flex-item">
						<view class="wallet-item-count">
							<u-count-to
								color="#333333"
								fontSize="30rpx"
								bold
								:startVal="0"
								:endVal="userStore?.user?.balance || 0"
								:decimals="2"></u-count-to>
						</view>
						<view class="wallet-item-name">余额</view>
					</view>
					<view class="wallet-item main-flex-item" @click="goUrl('/pages/jf/jf')">
						<view class="wallet-item-count">
							<u-count-to
								color="#333333"
								fontSize="30rpx"
								bold
								:startVal="0"
								:endVal="userStore?.user?.integral || 0"></u-count-to>
						</view>
						<view class="wallet-item-name">积分</view>
					</view>
					<view class="wallet-item main-flex-item" @click="goUrl('/pages/coupon/user')">
						<view class="wallet-item-count">{{couponCount}}</view>
						<view class="wallet-item-name">优惠券</view>
					</view>
				</view>
				<view class="wallet-line"></view>
				<view class="wallet-r">
					<view class="wallet-r-name">我的钱包</view>
					<view class="wallet-r-name1">WALLET</view>
				</view>
			</view>
			<!--收藏-->
			<!-- <view class="mine-content-box collection main-flex">
				<view class="collection-item main-flex">
					<view class="collection-item-l">
						<image class="collection-item-icon" src="/static/images/user/collection0.png"></image>
					</view>
					<view class="collection-item-r">
						<view class="collection-item-count">1</view>
						<view class="collection-item-name">我的收藏</view>
					</view>
				</view>
				<view class="collection-item main-flex">
					<view class="collection-item-l">
						<image class="collection-item-icon" src="/static/images/user/collection1.png"></image>
					</view>
					<view class="collection-item-r">
						<view class="collection-item-count"></view>
						<view class="collection-item-name">我的常购</view>
					</view>
				</view>
			</view> -->
			<!--服务-->
			<view class="mine-content-box service">
				<view class="service-title">我的服务</view>
				<view class="service-list">
					<uni-grid :column="5" :showBorder="false" :square="false">
						<uni-grid-item>
							<view class="service-item" @click="goUrl('/pages/collection/collection')">
								<view class="service-item-icon">
									<image class="service-item-icon-url" src="/static/images/service/service1.png"></image>
								</view>
								<view class="service-item-name">我的收藏</view>
							</view>
						</uni-grid-item>
						<uni-grid-item>
							<view class="service-item" @click="goUrl('/pages/regularBuyProductList/regularBuyProductList')">
								<view class="service-item-icon">
									<image class="service-item-icon-url" src="/static/images/service/service2.png"></image>
								</view>
								<view class="service-item-name">我的常购</view>
							</view>
						</uni-grid-item>
						<uni-grid-item>
							<view class="service-item" @click="goUrl('/pages/address/list')">
								<view class="service-item-icon">
									<image class="service-item-icon-url" src="/static/images/service/service3.png"></image>
								</view>
								<view class="service-item-name">地址服务</view>
							</view>
						</uni-grid-item>
						<uni-grid-item>
							<view class="service-item" @click="goUrl('/pages/capital/capital')">
								<view class="service-item-icon">
									<image class="service-item-icon-url" src="/static/images/service/service4.png"></image>
								</view>
								<view class="service-item-name">对账管理</view>
							</view>
						</uni-grid-item>
						<uni-grid-item>
							<view class="service-item" @click="goUrl('/pages/perfect/perfect')">
								<view class="service-item-icon">
									<image class="service-item-icon-url" src="/static/images/service/service5.png"></image>
								</view>
								<view class="service-item-name">店铺信息</view>
							</view>
						</uni-grid-item>
						<uni-grid-item>
							<view class="service-item">
								<view class="service-item-icon">
									<image class="service-item-icon-url" src="/static/images/service/service6.png"></image>
								</view>
								<view class="service-item-name">团长订单</view>
							</view>
						</uni-grid-item>
						<uni-grid-item>
							<!--#ifdef MP-WEIXIN-->
							<view class="service-item">
								<view class="service-item-icon">
									<image class="service-item-icon-url" src="/static/images/service/service7.png"></image>
								</view>
								<view class="service-item-name">推荐分享</view>
								<button class="service-item-share" open-type="share">推荐分享</button>
							</view>
							<!--#endif-->
							<!--#ifndef MP-WEIXIN-->
							<view class="service-item" @click="goShare">
								<view class="service-item-icon">
									<image class="service-item-icon-url" src="/static/images/service/service7.png"></image>
								</view>
								<view class="service-item-name">推荐分享</view>
							</view>
							<!--#endif-->
						</uni-grid-item>
						<uni-grid-item>
							<view class="service-item" @click="goUrl('/pages/mine/set')">
								<view class="service-item-icon">
									<image class="service-item-icon-url" src="/static/images/service/service8.png"></image>
								</view>
								<view class="service-item-name">我的设置</view>
							</view>
						</uni-grid-item>
						<uni-grid-item>
							<view class="service-item" @click="goService">
								<view class="service-item-icon">
									<image class="service-item-icon-url" src="/static/images/service/service9.png"></image>
								</view>
								<view class="service-item-name">业务专员</view>
							</view>
						</uni-grid-item>
						<uni-grid-item>
							<view class="service-item" @click="goUrl('/pages/feedback/add')">
								<view class="service-item-icon">
									<image class="service-item-icon-url" src="/static/images/service/service10.png"></image>
								</view>
								<view class="service-item-name">反馈建议</view>
							</view>
						</uni-grid-item>
						<!--#ifndef MP-WEIXIN-->
						<uni-grid-item>
							<view class="service-item" @click="openVersion">
								<view class="service-item-icon">
									<image class="service-item-icon-url" src="/static/images/service/service11.png"></image>
								</view>
								<view class="service-item-name">版本信息</view>
							</view>
						</uni-grid-item>
						<!--#endif-->
					</uni-grid>
					
				</view>
			</view>
		</view>
		<!--#ifndef MP-WEIXIN-->
		<uni-popup ref="popupVersion" type="dialog">
		  <uni-popup-dialog
				type="info"
				:showClose="false" 
				confirmText="我知道了"
		    title="版本信息"
		  	@confirm="dialogVersionConfirm">
				<view class="version">
					<view class="version-item">版本号：V {{version}}</view>
					<view class="version-item">官网：{{gwUrl}}</view>
				</view>
		  </uni-popup-dialog>
		</uni-popup>
		<!--#endif-->
	</view>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { onPullDownRefresh, onReady, onLoad, onReachBottom, onShow, onHide, onPageScroll, onShareAppMessage } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { getNode, shareWeixin, serviceWeixin} from '@/utils/ty.js'
import { getMpLogin } from '@/utils/login.js'
import {
	orderTotal,
	collection,
	couponNumber,
	signIn } from "@/api/app_api/user"
import { gwUrl, share } from '@/utils/config'
import modal from '@/plugins/modal'
import { getToken } from '@/utils/auth'

	const userStore = useUserStore()
	const setStore = useSetStore()
	
	// 页面设置
	const paddingTop = ref(0)
	const init = async () => {
		const query = uni.createSelectorQuery()
		const node = await getNode(query, '#header')
		paddingTop.value = node?.height || 0
	}
	
	// 页面跳转
	const goUrl = (url) => {
		if (!getMpLogin()) {
			return false
		}
		uni.navigateTo({
			url
		})
	}
	
	// 页面滚动
	const isBgShow = ref(false)
	onPageScroll((e) => {
		// if (e.scrollTop > 150 && !isBgShow.value) {
		// 	isBgShow.value = true
		// } else if (e.scrollTop <= 150 && isBgShow.value) {
		// 	isBgShow.value = false
		// }
	})
	
	// 获取收藏
	const collectionCount = ref(0)
	const getCollection = () => {
		collection().then(res => {
			collectionCount.value = res?.data.length || 0
		})
	}
	// 获取订单数量
	const orderCount = ref({
		order0: 0,
		order1: 0,
		order2: 0,
		order6: 0
	})
	const getOrderTotal = () => {
		orderTotal().then(res => {
			orderCount.value = {
				order0: res?.data?.waitPay || 0,
				order1: res?.data?.waitSend || 0,
				order2: res?.data?.successSend || 0,
				order6: res?.data?.success || 0
			}
		})
	}
	// 获取优惠券数量
	const couponCount = ref(0)
	const getCouponNumber = () => {
		couponNumber().then(res => {
			couponCount.value = res?.data || 0
		})
	}
	
	// 分享
	const goShare = () => {
		console.log('分享')
		// #ifndef MP-WEIXIN
		const spreadCode = userStore.user.spreadCode
		let shareUrl = share.shareUrl
		if(spreadCode){
			shareUrl = `${setStore.baseUrl}/app_api/salesman/spread/enter/${spreadCode}`
		}
		shareWeixin({
			shareUrl,
			title: share.title,
			content: share.content,
			img: share.img
		})
		// #endif
	}
	
	// #ifdef MP-WEIXIN
	onShareAppMessage(() => {
		return {
			title: share.title,
			path: `/pages/index/index?spreadCode=${userStore.user.spreadCode}&isTc=${userStore.isTc}`,
			imageUrl: share.img
		}
	})
	// #endif
	
	// 客服
	const goService = () => {
		serviceWeixin()
	}
	
	// #ifndef MP-WEIXIN
	// 查看版本信息
	const version = ref(uni.getSystemInfoSync()?.appVersion || '')
	const popupVersion = ref(null)
	const openVersion = () => {
		popupVersion.value.open()
	}
	const dialogVersionConfirm = () => {
		popupVersion.value.close()
	}
	// #endif
	
	// 签到
	const isSign = ref(false)
	const goSign = () => {
		if (!getMpLogin()) {
			return false
		}
		if (isSign.value) {
			return false
		}
		isSign.value = true
		signIn().then(res => {
			uni.$u.toast(res.msg)
			userStore.getUserInfo()
			isSign.value = false
		}).catch(() => {
			isSign.value = false
		})
	}
	
	// 去登陆
	const goLogin = async () => {
		// #ifdef MP-WEIXIN
		const token = getToken()
		if (!token) {
			const openId = await userStore.wxMpOpenId()
			if (!openId) return false
			userStore.wxMpLoginFun({
				openid: openId
			}).then(res => {
				userStore.getUserInfo(user => {
					if (!user.data.phone) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				})
			})
			return false
		}
		// #endif
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}
	
	onReady(() => {
		init()
	})
	
	onShow(() => {
		// getCollection()
		userStore.getUserInfo()
		getOrderTotal()
		getCouponNumber()
	})
	
	onPullDownRefresh(() => {
		// getCollection()
		userStore.getUserInfo()
		getOrderTotal()
		getCouponNumber()
		uni.stopPullDownRefresh()
	})
	
</script>

<style lang="scss">
	.wrapper {
		position: relative;
		.mine {
			&-header {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				z-index: 10;
				padding: 12rpx 0;
				// #ifdef MP-WEIXIN
				padding-top: 0;
				// #endif
				opacity: 0;
				transition: all 0.3s;
				&-bg {
					background-color: #ffffff;
					background-size: 100% 250px;
					opacity: 1;
				}
			}
			&-menu1 {
				padding: 0 20rpx;
				&-item {
					margin-right: 20rpx;
				}
			}
			&-bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 250px;
				background: linear-gradient(29deg, rgba(227, 35, 14, .61) 26%, hsla(0, 0%, 100%, .99) 67%, rgba(227, 35, 14, .5));
				opacity: .5;
				&-img {
					width: 250px;
					margin-left: auto;
					&-box {
						position: relative;
						padding-bottom: 100%;
						margin-left: auto;
						&-url {
							position: absolute;
							right: 0;
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			&-content {
				position: relative;
				top: 0;
				left: 0;
				width: 100%;
				padding: 0 20rpx;
				box-sizing: border-box;
				z-index: 2;
				&-box {
					margin-top: 32rpx;
					background-color: #ffffff;
					border-radius: 20rpx;
				}
			}
		}
		
		.user {
			&-header {
				border-radius: 50%;
				overflow: hidden;
				background-color: #ffffff;
				padding: 2px;
				box-sizing: border-box;
			}
			&-info {
				padding: 0 20rpx;
			}
			&-name {
				font-size: 36rpx;
				font-weight: 600;
			}
			&-type {
				font-size: 28rpx;
				margin-top: 8rpx;
			}
			&-tag {
				font-size: 24rpx;
				margin-top: 8rpx;
				border-radius: 8rpx;
				border: 1px solid $primary-color;
				color: $primary-color;
				padding: 0 6rpx;
			}
			&-menu {
				margin-left: auto;
				&-item {
					padding: 0 20rpx;
					text-align: center;
				}
				&-icon {
				}
				&-name {
					font-size: 28rpx;
					font-weight: 600;
					margin-top: 6rpx;
				}
			}
		}
		
		.order {
			padding: 0 20rpx;
			&-title {
				font-size: 30rpx;
				font-weight: 600;
				padding: 20rpx 0;
			}
			&-list {
				justify-content: space-between;
				padding: 20rpx 0;
				border-top: 1px solid $line-color;
			}
			&-item {
				width: 120rpx;
				text-align: center;
				&-icon {
					height: 72rpx;
					&-url {
						width: 72rpx;
						height: 72rpx;
					}
				}
				&-name {
					font-size: 26rpx;
				}
			}
		}
		
		.wallet {
			height: 150rpx;
			padding: 20rpx 0;
			box-sizing: border-box;
			&-line {
				width: 1px;
				height: 100%;
				background-color: $line-color;
			}
			&-r {
				width: 200rpx;
				font-size: 30rpx;
				text-align: center;
				&-name {
					font-weight: 600;
				}
				&-name1 {
					color: #d9d9d9;
				}
			}
			&-item {
				text-align: center;
				&-count {
					font-weight: 600;
					font-size: 30rpx;
				}
				&-name {
					font-size: 24rpx;
					margin-top: 4rpx;
				}
			}
		}
		
		.collection {
			&-item {
				&-icon {
					width: 120rpx;
					height: 120rpx;
				}
				&-r {
					
				}
			}
		}
		
		.service {
			padding: 0 20rpx;
			&-title {
				font-size: 30rpx;
				font-weight: 600;
				padding: 20rpx 0;
			}
			&-list {
				justify-content: space-between;
				padding: 10rpx 0;
				border-top: 1px solid $line-color;
			}
			&-item {
				position: relative;
				padding: 16rpx 0;
				&-icon {
					height: 56rpx;
					text-align: center;
					&-url {
						width: 56rpx;
						height: 56rpx;
					}
				}
				&-name {
					font-size: 26rpx;
					margin-top: 8rpx;
					text-align: center;
				}
				&-share {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					z-index: 1;
					opacity: 0;
				}
			}
		}
		
	}
</style>
